<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BitMap Demo</title>
    <script src="https://aobing.oss-cn-hangzhou.aliyuncs.com/aobing/echarts.min.js" type="text/javascript"></script>
    <script src="https://aobing.oss-cn-hangzhou.aliyuncs.com/aobing/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="main" style="width: 1024px;height:768px;margin: 0 auto;">

    </div>
</body>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    function getVirtulData(year) {
        var date = +echarts.number.parseDate(year + '-01-01');
        var end = +echarts.number.parseDate(+year + 1 + '-01-01');
        console.log(date)
        console.log(end)
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        $.ajax({
            "url":'http://localhost:8080/test/getPushData',
            "async":false,
            success:function (res){
                for (let time = date,k=0; time < end && k < res.data.length; time += dayTime,k++) {
                    data.push([
                        echarts.format.formatTime('yyyy-MM-dd', time),
                        parseInt(res.data[k],2)
                    ]);
                }
            }
        })

        return data;
    }
    option = {
        title: {
            top: 30,
            left: 'left',
            text: 'BitMap Demo'
        },
        tooltip: {},
        visualMap: {
            min: 0,
            max: 32,
            type: 'piecewise',
            orient: 'horizontal',
            left: 'right',
            top: 220,
            pieces: [
                {min: 0, max: 0,label:"less"},
                {min: 1, max: 10,label:" "},
                {min: 1, max: 20,label:" "},
                {min: 21, max: 40,label:" "},
                {min: 41, max: 64,label:"more"},
            ],
            inRange: {
                color: [ '#EAEDF0', '#9AE9A8', '#41C363', '#31A14E', '#206D38' ], // 图元的颜色
                colorAlpha: 0.9, // 图元的颜色的透明度
            }
        },
        calendar: {
            top: 120,
            left: 30,
            right: 30,
            cellSize: 13,
            range: '2022',
            splitLine: { show: false }, // 设置日历坐标分隔线的样式
            itemStyle: {
                borderWidth: 0.5
            },
            yearLabel: { show: false }
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: getVirtulData('2022')
        }
    };

    option && myChart.setOption(option);
</script>
</html>